<script lang="ts" setup>
import { ref } from 'vue';
import { Carousel } from '@ark-ui/vue/carousel';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';

const { $fetch } = useFetch();

const { data: imgList } = useAsyncData(
  'home:banner',
  () => $fetch('/operator/getOperatorList', { method: 'post', data: { operateType: 2 } }),
);

// 默认值需要使用 -1 否则 Carousel.Indicator 渲染不正常
const index = ref(-1);
</script>

<template>
  <section class="h-400 w-880 rounded-6 shadow-[0_1px_6px_0_rgba(0,0,0,0.04)]">
    <Carousel.Root id="page-tempalte3-carousel" class="relative overflow-x-hidden" autoplay loop v-model:page="index" v-if="imgList?.length">
      <Carousel.Context v-slot="context">
        <Carousel.ItemGroup>
          <Carousel.Item class="h-400" v-for="(item, idx) in imgList" :key="idx" :index="idx">
            <a class="block size-full" :href="item.jumpUrl" target="_blank" :aria-label="`${$t('home.common.carousel.jumpToUrl', { url: item.jumpUrl }) }`">
              <img :src="item.picUrl" :alt="item.operateName" class="block size-full rounded-6 object-cover">
            </a>
          </Carousel.Item>
        </Carousel.ItemGroup>
        <Carousel.IndicatorGroup class="absolute bottom-24 left-50% z-1 mx-auto flex translate-x--50% gap-x-8">
          <Carousel.Indicator
            v-for="(_, idx) in imgList"
            :key="idx"
            :index="idx"
            class="h-4 w-32 rounded-2 bg-[rgb(0,0,0,0.1)]"
            :aria-label="`${$t('home.common.carousel.changeTo', { index: idx + 1 }) }`"
            @click="context.play"
          >
            <div
              class="h-full rounded-2 bg-black"
              :class="[ idx === index ? 'w-full transition-width duration-4000 transition-ease-linear' : 'w-0']"
            >
            </div>
          </Carousel.Indicator>
        </carousel.indicatorgroup>
      </Carousel.Context>
    </Carousel.Root>
  </section>
</template>

<style lang="scss" scoped>
</style>
